<template>
  <el-container class="admin">
    <el-header class="header" style="height: 64px">
      <div class="img">
        <p>新媒体直播</p>
        <p>数据化运营实训软件</p>
      </div>
      <div class="title">
        <p>智能教学</p>
      </div>
      <div class="head">
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#420d91"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-submenu index="1">
            <template slot="title">
              <span>行业分析</span>
            </template>
            <el-menu-item index="/cateList">类目排行榜</el-menu-item>
            <el-menu-item index="/hotShop">热门店铺排行榜</el-menu-item>
            <el-menu-item index="/hotVideo">热门视频排行榜</el-menu-item>
            <el-menu-item index="/brandList">品牌榜单</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <span>流量洞察</span>
            </template>
            <el-menu-item index="/hotSeeing">热门直播间</el-menu-item>
            <el-menu-item index="/hotMan">热门主播榜</el-menu-item>
            <el-menu-item index="/goodsSquare">带货直播广场</el-menu-item>
            <el-menu-item index="/windList">直播风车榜</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <span>爆品海选</span>
            </template>
            <el-menu-item index="/seeGoods">直播商品爆款</el-menu-item>
            <el-menu-item index="/hcateList">直播类目大盘</el-menu-item>
            <el-menu-item index="/hotGoods">热门商品广场</el-menu-item>
            <el-menu-item index="/getGoods">带货视频优选</el-menu-item>
          </el-submenu>
          <el-submenu index="0">
            <template slot="title">
              <span>效果分析</span>
            </template>
            <el-menu-item index="/egetGoods">带货商品分析</el-menu-item>
            <el-menu-item index="/brandSee">品牌直播间分析</el-menu-item>
            <el-menu-item index="/ehotMan">达人直播分析</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <span>素材&视频工具</span>
            </template>
            <el-submenu index="4-1">
              <template slot="title">广告脚本</template>
              <el-menu-item index="toolVideo">引流视频素材</el-menu-item>
              <el-menu-item index="videoFoot">视频素材脚本</el-menu-item>
            </el-submenu>
            <el-menu-item index="/sPeack">话术推荐</el-menu-item>
            <el-menu-item index="/tRio">ROI计算器</el-menu-item>
            <el-menu-item index="/tUser">对比账号</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <span>平台工具</span>
            </template>
            <el-submenu index="5-1">
              <template slot="title">落地页工具</template>
              <el-menu-item index="5-1-1" @click="handleSelect(2)"
                >轻叶落地页</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-2">
              <template slot="title">关键词工具</template>
              <el-menu-item index="5-2-1" @click="handleSelect(51)"
                >7890</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-3">
              <template slot="title">在线广告检测</template>
              <el-menu-item index="5-3-1" @click="handleSelect(52)"
                >艾奇Rank</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-4">
              <template slot="title">分词快速</template>
              <el-menu-item index="5-4-1" @click="handleSelect(53)"
                >厚昌分词</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-5">
              <template slot="title">素材工具平台</template>
              <el-menu-item index="5-5-1" @click="handleSelect(551)"
                >全景素材网</el-menu-item
              >
              <el-menu-item index="5-5-2" @click="handleSelect(552)"
                >搜狗图片</el-menu-item
              >
              <el-menu-item index="5-5-3" @click="handleSelect(553)"
                >360图片</el-menu-item
              >
              <el-menu-item index="5-5-4" @click="handleSelect(554)"
                >必应图片</el-menu-item
              >
              <el-menu-item index="5-5-5" @click="handleSelect(555)"
                >百度图片</el-menu-item
              >
              <el-menu-item index="5-5-6" @click="handleSelect(556)"
                >图库中国</el-menu-item
              >
              <el-menu-item index="5-5-7" @click="handleSelect(557)"
                >多搜搜</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-6">
              <template slot="title">在线调研平台</template>
              <el-menu-item index="5-6-1" @click="handleSelect(561)"
                >麦克表单</el-menu-item
              >
              <el-menu-item index="5-6-2" @click="handleSelect(562)"
                >腾讯问卷</el-menu-item
              >
              <el-menu-item index="5-6-3" @click="handleSelect(563)"
                >问卷星</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-7">
              <template slot="title">延伸学习平台</template>
              <el-menu-item index="5-7-1" @click="handleSelect(571)"
                >媒介360企业版</el-menu-item
              >
              <el-menu-item index="5-7-2" @click="handleSelect(572)"
                >有米云平台</el-menu-item
              >
              <el-menu-item index="5-7-3" @click="handleSelect(573)"
                >青瓜传媒</el-menu-item
              >
              <el-menu-item index="5-7-4" @click="handleSelect(574)"
                >百度好文案/创意灵感</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-8">
              <template slot="title">网络工具平台</template>
              <el-menu-item index="5-8-1" @click="handleSelect(581)"
                >爱站网</el-menu-item
              >
              <el-menu-item index="5-8-2" @click="handleSelect(582)"
                >站长之家工具频道</el-menu-item
              >
              <el-menu-item index="5-8-3" @click="handleSelect(583)"
                >5118大数据</el-menu-item
              >
              <el-menu-item index="5-8-4" @click="handleSelect(584)"
                >自动建立账户结构</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-9">
              <template slot="title">在线协作工具</template>
              <el-menu-item index="5-9-1" @click="handleSelect(591)"
                >图片转pdf助手</el-menu-item
              >
              <el-menu-item index="5-9-2" @click="handleSelect(592)"
                >在线思维导图网站</el-menu-item
              >
              <el-menu-item index="5-9-3" @click="handleSelect(593)"
                >百度脑图官网</el-menu-item
              >
            </el-submenu>
          </el-submenu>
        </el-menu>
        <div>
          <el-button type="primary" round>登录/注册</el-button>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="210px">
        <el-menu
          :default-active="this.index"
          class="el-menu-vertical-demo"
          :router="true"
          background-color="#420d91"
          text-color="#fff"
          active-text-color="#fff"
          :unique-opened="true"
          @select="geturl"
        >
          <el-menu-item index="/alearn">
            <span slot="title"
              ><i
                class="el-icon-reading"
                style="
                  vertical-align: middle;
                  margin-right: 5px;
                  width: 14px;
                  text-align: center;
                  font-size: 14px;
                  color: #fff;
                "
              ></i
              >智能教学</span
            >
          </el-menu-item>
          <el-menu-item index="/allCase">
            <span slot="title">
              <i
                class="el-icon-data-line"
                style="
                  vertical-align: middle;
                  margin-right: 5px;
                  width: 14px;
                  text-align: center;
                  font-size: 14px;
                  color: #fff;
                "
              ></i
              >全域案例</span
            >
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <span
                ><i
                  class="el-icon-document-remove"
                  style="
                    vertical-align: middle;
                    margin-right: 5px;
                    width: 14px;
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                  "
                ></i
                >行业分析</span
              >
            </template>
            <el-menu-item index="/cateList">类目排行榜</el-menu-item>
            <el-menu-item index="/hotShop">热门店铺排行榜</el-menu-item>
            <el-menu-item index="/hotVideo">热门视频排行榜</el-menu-item>
            <el-menu-item index="/brandList">品牌榜单</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <span
                ><i
                  class="el-icon-view"
                  style="
                    vertical-align: middle;
                    margin-right: 5px;
                    width: 14px;
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                  "
                ></i
                >流量洞察</span
              >
            </template>
            <el-menu-item index="/hotSeeing">热门直播间</el-menu-item>
            <el-menu-item index="/hotMan">热门主播榜</el-menu-item>

            <el-menu-item index="/goodsSquare">带货直播广场</el-menu-item>
            <el-menu-item index="/windList">直播风车榜</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <span
                ><i
                  class="el-icon-set-up"
                  style="
                    vertical-align: middle;
                    margin-right: 5px;
                    width: 14px;
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                  "
                ></i
                >爆品海选</span
              >
            </template>
            <el-menu-item index="/seeGoods">直播商品爆款</el-menu-item>
            <el-menu-item index="/hcateList">直播类目大盘</el-menu-item>
            <el-menu-item index="/hotGoods">热门商品广场</el-menu-item>
            <el-menu-item index="/getGoods">带货视频优选</el-menu-item>
          </el-submenu>
          <el-submenu index="0">
            <template slot="title">
              <span
                ><i
                  class="el-icon-set-up"
                  style="
                    vertical-align: middle;
                    margin-right: 5px;
                    width: 14px;
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                  "
                ></i
                >效果分析</span
              >
            </template>
            <el-menu-item index="/egetGoods">带货商品分析</el-menu-item>
            <el-menu-item index="/brandSee">品牌直播间分析</el-menu-item>
            <el-menu-item index="/ehotMan">达人直播分析</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <span
                ><i
                  class="el-icon-edit"
                  style="
                    vertical-align: middle;
                    margin-right: 5px;
                    width: 14px;
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                  "
                ></i
                >素材&视频工具</span
              >
            </template>
            <el-submenu index="4-1">
              <template slot="title">广告脚本</template>
              <el-menu-item index="toolVideo">引流视频素材</el-menu-item>
              <el-menu-item index="videoFoot">视频素材脚本</el-menu-item>
            </el-submenu>
            <el-menu-item index="/sPeack">话术推荐</el-menu-item>
            <el-menu-item index="/tRio">ROI计算器</el-menu-item>
            <el-menu-item index="/tUser">对比账号</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <span
                ><i
                  class="el-icon-attract"
                  style="
                    vertical-align: middle;
                    margin-right: 5px;
                    width: 14px;
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                  "
                ></i
                >平台工具</span
              >
            </template>
            <el-submenu index="5-1">
              <template slot="title">落地页工具</template>
              <el-menu-item index="5-1-1" @click="handleSelect(2)"
                >轻叶落地页</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-2">
              <template slot="title">关键词工具</template>
              <el-menu-item index="5-2-1" @click="handleSelect(51)"
                >7890</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-3">
              <template slot="title">在线广告检测</template>
              <el-menu-item index="5-3-1" @click="handleSelect(52)"
                >艾奇Rank</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-4">
              <template slot="title">分词快速</template>
              <el-menu-item index="5-4-1" @click="handleSelect(53)"
                >厚昌分词</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-5">
              <template slot="title">素材工具平台</template>
              <el-menu-item index="5-5-1" @click="handleSelect(551)"
                >全景素材网</el-menu-item
              >
              <el-menu-item index="5-5-2" @click="handleSelect(552)"
                >搜狗图片</el-menu-item
              >
              <el-menu-item index="5-5-3" @click="handleSelect(553)"
                >360图片</el-menu-item
              >
              <el-menu-item index="5-5-4" @click="handleSelect(554)"
                >必应图片</el-menu-item
              >
              <el-menu-item index="5-5-5" @click="handleSelect(555)"
                >百度图片</el-menu-item
              >
              <el-menu-item index="5-5-6" @click="handleSelect(556)"
                >图库中国</el-menu-item
              >
              <el-menu-item index="5-5-7" @click="handleSelect(557)"
                >多搜搜</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-6">
              <template slot="title">在线调研平台</template>
              <el-menu-item index="5-6-1" @click="handleSelect(561)"
                >麦克表单</el-menu-item
              >
              <el-menu-item index="5-6-2" @click="handleSelect(562)"
                >腾讯问卷</el-menu-item
              >
              <el-menu-item index="5-6-3" @click="handleSelect(563)"
                >问卷星</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-7">
              <template slot="title">延伸学习平台</template>
              <el-menu-item index="5-7-1" @click="handleSelect(571)"
                >媒介360企业版</el-menu-item
              >
              <el-menu-item index="5-7-2" @click="handleSelect(572)"
                >有米云平台</el-menu-item
              >
              <el-menu-item index="5-7-3" @click="handleSelect(573)"
                >青瓜传媒</el-menu-item
              >
              <el-menu-item index="5-7-4" @click="handleSelect(574)"
                >百度好文案/创意灵感</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-8">
              <template slot="title">网络工具平台</template>
              <el-menu-item index="5-8-1" @click="handleSelect(581)"
                >爱站网</el-menu-item
              >
              <el-menu-item index="5-8-2" @click="handleSelect(582)"
                >站长之家工具频道</el-menu-item
              >
              <el-menu-item index="5-8-3" @click="handleSelect(583)"
                >5118大数据</el-menu-item
              >
              <el-menu-item index="5-8-4" @click="handleSelect(584)"
                >自动建立账户结构</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5-9">
              <template slot="title">在线协作工具</template>
              <el-menu-item index="5-9-1" @click="handleSelect(591)"
                >图片转pdf助手</el-menu-item
              >
              <el-menu-item index="5-9-2" @click="handleSelect(592)"
                >在线思维导图网站</el-menu-item
              >
              <el-menu-item index="5-9-3" @click="handleSelect(593)"
                >百度脑图官网</el-menu-item
              >
            </el-submenu>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <span
                ><i
                  class="el-icon-tickets"
                  style="
                    vertical-align: middle;
                    margin-right: 5px;
                    width: 14px;
                    text-align: center;
                    font-size: 14px;
                    color: #fff;
                  "
                ></i
                >资格认证</span
              >
            </template>
            <el-submenu index="9-1">
              <template slot="title">网站广告企划</template>
              <el-menu-item index="9-1-1" @click="handleSelect(5)"
                >网站数据分析企划方案输出</el-menu-item
              >
              <el-menu-item @click="handleSelect(5)">在线评分</el-menu-item>
            </el-submenu>
            <el-menu-item index="9-2">在线测试题库</el-menu-item>
            <el-menu-item index="9-3">模拟复盘任务</el-menu-item>
            <el-submenu index="9-4">
              <template slot="title">官方考试接口</template>
              <el-menu-item index="9-4-1" @click="handleSelect(61)"
                >腾讯营销广告助理</el-menu-item
              >
              <el-menu-item index="9-4-2" @click="handleSelect(62)"
                >阿里巴巴数字人才助理</el-menu-item
              >
              <el-menu-item index="9-4-3" @click="handleSelect(63)"
                >数据分析师NSAC</el-menu-item
              >
              <el-menu-item index="9-4-4" @click="handleSelect(64)"
                >学习电子凭证</el-menu-item
              >
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      index: "/aLearn",
      tableData: [],
      sign: true,
      activeName: "1",
      activeIndex2: "",
      region: "www.jd.com",
      roleid: {
        id: "",
      },
    };
  },
  methods: {
    handleCommand(command) {
      console.log(command);
    },
    handleCommand1(command) {
      console.log(command);
    },
    handleCommand2(command) {
      console.log(command);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSelect(key) {
      console.log(key);

      console.log(!isNaN(this.$route.path.slice(1, 2)));
      if (this.$route.path.slice(1, 2)) {
        this.$router.go(-1);
      }
      if (key == 1) {
        window.open("http://yiye.ai/");
      }
      if (key == 2) {
        window.open("https://www.adplusx.com/");
      }
      if (key == 3) {
        window.open(
          "https://cc.oceanengine.com/inspiration/creative-radar-industry"
        );
      }
      if (key == 4) {
        window.open(
          "https://cc.oceanengine.com/inspiration/creative-radar/video"
        );
      }
      if (key == 5) {
        window.open("https://ec.e.360.cn/home/smartycreative");
      }
      if (key == 6) {
        window.open("https://ec.e.360.cn/home/smartycreative");
      }

      if (key == 51) {
        window.open("http://78901.net");
      }
      if (key == 52) {
        window.open(" https://www.27sem.com/rank");
      }
      if (key == 53) {
        window.open(" http://www.hc661.com/");
      }
      if (key == 551) {
        window.open("https://www.quanjing.com/ ");
      }
      if (key == 552) {
        window.open("https://pic.sogou.com ");
      }
      if (key == 553) {
        window.open("https://image.so.com ");
      }
      if (key == 554) {
        window.open("https://cn.bing.com ");
      }
      if (key == 555) {
        window.open("https://image.baidu.com ");
      }
      if (key == 556) {
        window.open("https://www.tukuchina.cn/");
      }
      if (key == 557) {
        window.open("http://duososo.com/ ");
      }
      if (key == 561) {
        window.open("http://www.mikecrm.com/ ");
      }
      if (key == 562) {
        window.open("https://wj.qq.com/");
      }
      if (key == 563) {
        window.open("https://www.wjx.cn/");
      }
      if (key == 571) {
        window.open("https://www.m360.cn/");
      }
      if (key == 572) {
        window.open("https://youcloud.com/");
      }
      if (key == 573) {
        window.open("http://www.opp2.com/");
      }
      if (key == 574) {
        window.open("https://chuangyi.baidu.com ");
      }
      if (key == 581) {
        window.open("https://www.aizhan.com/");
      }
      if (key == 582) {
        window.open("https://tool.chinaz.com/");
      }
      if (key == 583) {
        window.open("https://www.5118.com/");
      }
      if (key == 584) {
        window.open("http://www.hc661.com/");
      }
      if (key == 591) {
        window.open("https://smallpdf.com/cn/jpg-to-pdf");
      }
      if (key == 592) {
        window.open("https://www.processon.com/");
      }
      if (key == 593) {
        window.open("http://naotu.baidu.com");
      }
    },
    back() {
      // this.$router.push({ path: "/" });
    },
    geturl(a) {
      this.index = a;
      localStorage.setItem("url", a);
    },
  },
  mounted() {
    if (this.$route.path == "/alearn") {
      this.index = "/alearn";
    } else {
      if (localStorage.getItem("url")) {
        this.index = localStorage.getItem("url");
      }
    }
  },
};
</script >
<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #666 !important;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.hear_r :deep(.el-input__inner) {
  border: 0;
}
.el-menu-item.is-active {
  background: linear-gradient(45deg, #8351fe, #66b1ff);
}

.head {
  width: 972px;
  height: 100%;
  position: absolute;
  right: 40px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .el-menu.el-menu--horizontal {
    border: 0;
  }
}

.hear_l :deep(.el-tabs--top) {
  margin-top: 10px;
}
.hear_l {
  width: 20%;
}
.hear_r {
  width: 30%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.admin {
  height: 100%;
  width: 100%;
}
.el-aside {
  background: #420d91;
  height: 92vh;
  .system-name {
    color: #fff;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
.el-aside::-webkit-scrollbar {
  display: none;
}
.el-aside .el-menu-item:hover {
  background: linear-gradient(45deg, #8351fe, #66b1ff);
}
.el-aside :deep(.el-submenu__title):hover {
  background: linear-gradient(45deg, #8351fe, #66b1ff);
}
.el-header {
  background: #420d91;
  position: relative;

  z-index: 2;
  .img {
    color: #fff;
    position: absolute;
    left: 30px;
    top: 10px;
    font-size: 18px;
  }
  .title {
    color: #409eff;
    position: absolute;
    left: 230px;
    top: 25px;
    height: 100%;
    font-size: 12px;
  }
  .el-button--primary {
    background-color: #8351fe;
    border-color: #8351fe;
    height: 26px;
    width: 88px;
    padding: 0;
  }
  .el-button--primary:hover {
    background-color: #409eff;
    border-color: #409eff;
  }
}

.el-main {
  background: #fff;
  height: 92vh;
  padding: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-breadcrumb {
  font-size: 24px;
}
.el-aside :deep(.el-menu-item) {
  display: flex;
  height: 46px;
  line-height: 46px;
}
.el-aside :deep(.el-submenu .el-menu-item) {
  display: flex;
  height: 46px;
  line-height: 46px;
  // margin-left: 45px;
}
.el-aside :deep(.el-submenu__title) {
  display: flex;
  height: 46px;
  line-height: 46px;
  // padding-left: 20px !important;
}
</style>